<template>
  <el-container>
    <el-aside v-if="menuDisplayFlag">
      <div id="menu">
        <el-scrollbar :style="{height: mainHeight + 'px'}" class="el-scrollbar__wrap">
          <MenuItem v-for="(field, index) in knowledge.knowledgeFieldList" v-if="!field.hidden" :key="index" :item="field"
                    @change-selection="refreshList(index)"></MenuItem>
        </el-scrollbar>
      </div>
    </el-aside>
    <el-main>
      <div id="main-content" :style="{height: mainHeight + 'px'}" style="overflow: auto; background-color: #F0F8F8;">
        <div id="knowledge-title" style="width: 100%; text-align: center;">
              <span class="knowledgeName">
                <span v-html="this.knowledge.name"></span>
              </span>
        </div>
        <div v-for="(field, index) in knowledge.knowledgeFieldList"
             v-if="!field.hidden && (emptyFieldDisplayFlag || UTIL.isNotEmptyObj(field.fieldValue))"
             :key="index" style="margin: 20px;">
          <div :id="'field-' + index"/>
          <div>
            <span class="fieldName" v-html="field.displayName ? field.displayName : field.name"></span>
          </div>
          <div id="content" style="margin-left: 20px;margin-top: 15px">
            <div v-if="[2,3,5,10].indexOf(field.kind) > -1">
              <div v-html="field.fieldValue"></div>
            </div>
            <!-- 图片 -->
            <div v-else-if="field.kind === 4">
              <p class="p_title" v-html="field.fieldValue.title"/>
              <div v-for="path in field.fieldValue.paths">
                <p/>
                <img
                  :class="field.fieldValue.type + ' ' + field.fieldValue.additional + ' ' + field.fieldValue.classification"
                  :src="path">
              </div>
              <p class="p_note" v-html="field.fieldValue.comment"/>
            </div>
            <!-- 多值输入框 -->
            <div v-else-if="field.kind === 7">
              <div v-if="field.fieldValue" v-html="field.fieldValue.join(',')"></div>
            </div>
            <!-- 关联本知识库, 关联其他知识库 -->
            <div v-else-if="[8,9].indexOf(field.kind) > -1">
              <div v-for='item in field.fieldValue'>
                <el-link type="primary" v-html="item.name" @click.prevent="showRelatedKnowledge(item)"/>
              </div>
            </div>
            <!-- 视频 -->
            <div v-else-if="field.kind === 11" class="field bottom-space">
              <div v-for="path in field.fieldValue.paths">
                <p/>
                <video :src="path" controls="controls" preload/>
              </div>
            </div>
            <!-- 文件 -->
            <div v-else-if="field.kind === 12" class="field bottom-space">
              <div v-for="file in field.fieldValue">
                <a :href="file.path + '&originName=' + file.name" v-html="file.name"></a>
              </div>
            </div>
            <div v-else>
              <div v-html="field.fieldValue"></div>
            </div>

            <!-- 来源 -->
            <div v-if="field.source && field.source.length > 0" class="text-aline-right">
              <div class="line knowledge-source vertical-align-top">
                知识来源：
              </div>
              <div class="line vertical-align-top text-aline-left">
                <div v-for="source in field.source">
                  <div class="line vertical-align-top knowledge-source">{{ source.name }} -</div>
                  <div class="line vertical-align-top knowledge-source">{{ source.version }} -</div>
                  <div class="line vertical-align-top knowledge-source">{{ source.isbn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ToTopButton @to-top="handleToTopClick"></ToTopButton>
      <el-dialog ref="imgDialog" :append-to-body="true" :destroy-on-close="true" :modal="false"
                 :visible.sync="photoVisible"
                 style="text-align: center" width="70%" @closed='cleanDialog'>
        <img :src="urlSrc" width="70%">
      </el-dialog>
    </el-main>

  </el-container>
</template>

<script>
import MenuItem from "../../components/common/MenuItem";
import ToTopButton from "../edit/ToTopButton";
import {mapState} from 'vuex'

export default {
  name: "KnowledgeDetail",
  components: {
    MenuItem,
    ToTopButton,
  },
  props: {
    parentHeight: {
      type: Number
    },
    knowledgeId: {
      type: String
    },
    knowledgeStatus: {
      type: String,
    },
    menuDisplayFlag: {
      type: Boolean,
      default: true
    },
    emptyFieldDisplayFlag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mainHeight: 0,
      knowledge: {},
      photoVisible: false,
      urlSrc: ''
    }
  },
  computed: {
    ...mapState(['editingKnowledge'])
  },
  methods: {
    showRelatedKnowledge(item) {
      let knowledgeStatus = item.name.endsWith("(未发布)") ? 'unpublished' : 'published'
      this.$store.commit('setKnowledgeDetailId', item.id)
      this.$store.commit('setKnowledgeDetailStatus', knowledgeStatus)
      this.$store.commit('showKnowledgeDetail')
      this.handleToTopClick()
    },
    handleToTopClick() {
      document.getElementById("main-content").scrollTop = 0
    },
    refreshList(index) {
      let b = document.getElementById("field-" + index).offsetTop
      let a = document.getElementById("knowledge-title").offsetTop
      document.getElementById("main-content").scrollTop = b - a
      this.setAllItemsUnselected();
      this.knowledge.knowledgeFieldList[index].selected = true
    },
    setAllItemsUnselected() {
      this.knowledge.knowledgeFieldList.forEach(item => {
        item.selected = false;
      });
    },
    async getKnowledgeData() {
      if (this.editingKnowledge && this.knowledgeId === this.editingKnowledge.id) {
        this.knowledge = this.editingKnowledge
        return
      }
      let url = "";
      if (this.knowledgeStatus === 'unpublished') {
        url = "/pmph/action/knowledge/selectTempKnowledge";
      } else {
        url = "/pmph/action/knowledge/selectReleasedKnowledge";
      }
      await this.axios.get(url, {
        params: {
          knowledgeId: this.knowledgeId
        }
      }).then((res) => {
        this.knowledge = res.data
        this.knowledge.knowledgeFieldList[0].selected = true
      })
      this.$nextTick(this.open)
      // this.open()
    },
    cleanDialog() {
      this.photoVisible = false
    },
    open() {
      let imgElementList = document.images
      console.log(imgElementList)
      for (let imgElement of imgElementList) {
        imgElement.addEventListener("click", (event) => {
          this.urlSrc = event.target.getAttribute('src')
          this.photoVisible = true;
        });
      }
    }
  },
  created() {
    // 计算内容区域的高度
    if (this.parentHeight) {
      this.mainHeight = this.parentHeight
    } else this.mainHeight = CONST.WORKSPACE_HEIGHT - 20
    this.getKnowledgeData()
  },
  watch: {
    knowledgeId: function () {
      this.getKnowledgeData()
    },
  },
}
</script>

<style scoped>
.el-main {
  padding: 0px 20px
}

#content >>> .table,
#content >>> .general,
#content >>> .picture,
#content >>> .cover,
#content >>> .formula,
#content >>> .flow,
#content >>> .default,
#content >>> .other {
  width: 50%;
  height: auto;
  margin: 0 auto;
  display: block;

}

.knowledgeName {
  font-family: MicrosoftYaHei-Bold;
  font-size: 32px;
  color: #333333;
  letter-spacing: 0;
}

.fieldName {
  font-family: MicrosoftYaHei-Bold;
  font-size: 24px;
  color: #333333;
  letter-spacing: 0;
}

#menu {
  height: 90%;
  position: fixed;
  width: 300px;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: hidden;

}

.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}

.knowledge-source {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0;
}

.text-aline-left {
  text-align: left;
}

.text-aline-right {
  text-align: right;
}
</style>
